<script setup lang="js">
import './DesignStyle.css';

import $ from 'jquery';
import {defaultElementTypeProvider, hiprint} from 'vue-plugin-hiprint';
import {computed, nextTick, onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {DefaultTemplate, PageSizeList, CreateSimpleFormProvider, SimpleFormData} from "./Component.js";

const router = useRouter();
// Vertical Horizontal
const direction = ref('Vertical')
const getPager = computed(() => {
  return direction.value === 'Vertical' ? '横向' : '竖向';
})
const printTemplate = ref(null);
const scale = ref(1);
const templateData = ref(null);
const templateForm = ref(null);
const id = ref('')
onMounted(() => {
  nextTick(() => {
    templateData.value = JSON.parse(localStorage.getItem('templateData'));
    initHiPrintComponent();
  })
})
const initHiPrintComponent = () => {
  $('#printTemplate').empty()
  hiprint.init({
    providers: [new defaultElementTypeProvider(), CreateSimpleFormProvider(hiprint, SimpleFormData)],
    fontList: [{"title":'宋体',"value":'宋体'}],
  });
  hiprint.setConfig()
  hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
  const template = new hiprint.PrintTemplate({
    template: templateData.value ?? DefaultTemplate,
    settingContainer: '#printElementOptionSetting',
    // paginationContainer: '#printPagination',
    fontList: [
      {title: '宋体', value: 'SimSun'},
      {title: '微软雅黑', value: 'Microsoft YaHei'},
      {title: '黑体', value: 'STHeitiSC-Light'},
      {title: '思源黑体', value: 'SourceHanSansCN-Normal'},
    ],
    dataMode: 1,
    history: true,
    willOutOfBounds: true,
    qtDesigner: true,
    onDataChanged: (type, json) => {
      console.log(type);
      console.log(json);
    },
    onUpdateError: (e) => {
      console.error(e);
    },
  });
  template.design('#printTemplate', {grid: true});
  scale.value = template.editingPanel.scale || 1;
  printTemplate.value = template;
  direction.value = template.getOrient() === 1 ? 'Vertical' : 'Horizontal';
}
const handlePreview = function () {
  handleSavePanel();
  router.push({
    path: '/preview',
  });
}
const handleDirectionChange = function () {
  printTemplate.value?.rotatePaper();
  if (direction.value === 'Horizontal') {
    direction.value = 'Vertical';
  } else {
    direction.value = 'Horizontal';
  }
}
const handleCleanPanel = function () {
  printTemplate.value.clear();
}
const handleSavePanel = function () {
  templateData.value = printTemplate.value.getJson();
  console.log('printData', templateData.value);
  localStorage.setItem('templateData', JSON.stringify(templateData.value));
}
const handlePaperChange = function (item) {
  printTemplate.value.setPaper(item.width, item.height);
  const orient = printTemplate.value.getOrient() === 1 ? 'Vertical' : 'Horizontal';
  console.log('orient', orient, direction.value);
  if (orient !== direction.value) {
    printTemplate.value?.rotatePaper();
  }
}
</script>

<template>
  <div class="design-container">
    <div class="design-container-header">
      <div>
        <div class="header-button-list">
          <div class="design-container-header-button" @click="handlePreview">预览</div>
          <div class="design-container-header-button" @click="handleSavePanel">保存</div>
          <div class="design-container-header-button">打印</div>
          <div class="design-container-header-button" @click="handleCleanPanel">清除</div>
          <div class="design-container-header-button" @click="handleDirectionChange">{{ getPager }}</div>

          <div class="design-container-header-button" v-for="(item,index) in PageSizeList" v-bind:key="index"
               @click="handlePaperChange(item)">{{
              item.name
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="design-container-body">
      <div>
        <div class="design-container-card">
          <div class="design-container-button-card">
            <div class="design-container-button-card-title">
              表单组件
            </div>
            <div class="design-container-body-element-grid rect-printElement-types hiprintEpContainer">
              <div class="ep-draggable-item" :tid="`FormModule.${item.name}`" v-for="(item,index) in SimpleFormData">
                {{ item.text }}
              </div>
            </div>
          </div>
          <div class="design-container-button-card">
            <div class="design-container-button-card-title">
              默认组件
            </div>
            <div class="design-container-body-element-grid rect-printElement-types hiprintEpContainer">
              <div class="ep-draggable-item" tid="defaultModule.text">
                文本
              </div>
              <div class="ep-draggable-item" tid="defaultModule.image">
                图片
              </div>
              <div class="ep-draggable-item" tid="defaultModule.longText">
                长文本
              </div>
              <div class="ep-draggable-item" tid="defaultModule.emptyTable">
                表格
              </div>
              <div class="ep-draggable-item" tid="defaultModule.html">
                HTML
              </div>
              <div class="ep-draggable-item" tid="defaultModule.hline">
                水平线
              </div>
              <div class="ep-draggable-item" tid="defaultModule.vline">
                竖线
              </div>
              <div class="ep-draggable-item" tid="defaultModule.rect">
                矩形框
              </div>
              <div class="ep-draggable-item" tid="defaultModule.oval">
                椭圆形
              </div>
            </div>
          </div>
          <div class="design-container-button-card">
            <div class="design-container-button-card-title">
              组件示例
            </div>
            <div class="design-container-body-element-grid rect-printElement-types hiprintEpContainer">
              <div class="ep-draggable-item" tid="defaultModule.table">
                表格
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div id="printPagination"></div>
        <div id="printTemplate"></div>
      </div>
      <div id="printElementOptionSetting"></div>
    </div>
  </div>
</template>